<div class="sidebar" data-color="orange" data-image="/images/default/full-screen-image-3.jpg">
    <!--

        Tip 1: you can change the color of the sidebar using: data-color="blue | azure | green | orange | red | purple"
        Tip 2: you can also add an image using data-image tag

    -->

    <div class="logo">
        <a href="http://www.creative-tim.com" class="logo-text">
            Creative Tim
        </a>
    </div>
    <div class="logo logo-mini" style="display: none">
        <a href="http://www.creative-tim.com" class="logo-text">
            Ct
        </a>
    </div>

    <div class="sidebar-wrapper ps-container ps-theme-default ps-active-y"
         data-ps-id="3e9aa430-e86e-fb15-7f02-0ab463c4d714">
        <div class="user">
            <div class="photo">
                <img src="/images/default/default-avatar.png">
            </div>
            <div class="info">
                <a data-toggle="collapse" href="#collapseExample" class="collapsed">
                    Tania Andrew
                    <b class="caret"></b>
                </a>
                <div class="collapse" id="collapseExample">
                    <ul class="nav">
                        <li><a href="#">My Profile</a></li>
                        <li><a href="#">Edit Profile</a></li>
                        <li><a href="#">Settings</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <ul class="nav">
            <li class="active">
                <a href="dashboard.html">
                    <i class="pe-7s-graph"></i>
                    <p>Dashboard</p>
                </a>
            </li>
            <li>
                <a data-toggle="collapse" href="#componentsExamples">
                    <i class="pe-7s-plugin"></i>
                    <p>Components
                        <b class="caret"></b>
                    </p>
                </a>
                <div class="collapse" id="componentsExamples">
                    <ul class="nav">
                        <li><a href="components/buttons.html">Buttons</a></li>
                        <li><a href="components/grid.html">Grid System</a></li>
                        <li><a href="components/icons.html">Icons</a></li>
                        <li><a href="components/notifications.html">Notifications</a></li>
                        <li><a href="components/panels.html">Panels</a></li>
                        <li><a href="components/sweet-alert.html">Sweet Alert</a></li>
                        <li><a href="components/typography.html">Typography</a></li>
                    </ul>
                </div>
            </li>

            <li>
                <a data-toggle="collapse" href="#formsExamples">
                    <i class="pe-7s-note2"></i>
                    <p>Forms
                        <b class="caret"></b>
                    </p>
                </a>
                <div class="collapse" id="formsExamples">
                    <ul class="nav">
                        <li><a href="forms/regular.html">Regular Forms</a></li>
                        <li><a href="forms/extended.html">Extended Forms</a></li>
                        <li><a href="forms/validation.html">Validation Forms</a></li>
                        <li><a href="forms/wizard.html">Wizard</a></li>
                    </ul>
                </div>
            </li>

            <li>
                <a data-toggle="collapse" href="#tablesExamples">
                    <i class="pe-7s-news-paper"></i>
                    <p>Tables
                        <b class="caret"></b>
                    </p>
                </a>
                <div class="collapse" id="tablesExamples">
                    <ul class="nav">
                        <li><a href="tables/regular.html">Regular Tables</a></li>
                        <li><a href="tables/extended.html">Extended Tables</a></li>
                        <li><a href="tables/bootstrap-table.html">Bootstrap Table</a></li>
                        <li><a href="tables/datatables.net.html">DataTables.net</a></li>
                    </ul>
                </div>
            </li>

            <li>
                <a data-toggle="collapse" href="#mapsExamples">
                    <i class="pe-7s-map-marker"></i>
                    <p>Maps
                        <b class="caret"></b>
                    </p>
                </a>
                <div class="collapse" id="mapsExamples">
                    <ul class="nav">
                        <li><a href="maps/google.html">Google Maps</a></li>
                        <li><a href="maps/vector.html">Vector Maps</a></li>
                        <li><a href="maps/fullscreen.html">Full Screen Map</a></li>
                    </ul>
                </div>
            </li>

            <li>
                <a href="charts.html">
                    <i class="pe-7s-graph1"></i>
                    <p>Charts</p>
                </a>
            </li>

            <li>
                <a href="calendar.html">
                    <i class="pe-7s-date"></i>
                    <p>Calendar</p>
                </a>
            </li>

            <li>
                <a data-toggle="collapse" href="#pagesExamples">
                    <i class="pe-7s-gift"></i>
                    <p>Pages
                        <b class="caret"></b>
                    </p>
                </a>
                <div class="collapse" id="pagesExamples">
                    <ul class="nav">
                        <li><a href="pages/login.html">Login Page</a></li>
                        <li><a href="pages/register.html">Register Page</a></li>
                        <li><a href="pages/lock.html">Lock Screen Page</a></li>
                        <li><a href="pages/user.html">User Page</a></li>
                        <li><a href="#">More coming soon...</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    <div class="sidebar-background" style="background-image: url(/images/default/full-screen-image-3.jpg) "></div>
</div>